<template>
    <div class="order">
      <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
      <van-tabs v-model="active">

        <van-tab title="全部" name="all"></van-tab>
        <van-tab title="待支付" name="payment"></van-tab>
        <van-tab title="待发货" name="delivery"></van-tab>
        <van-tab title="待收货" name="received"></van-tab>
        <van-tab title="待评价" name="comment"></van-tab>
      </van-tabs>

      <OrderListItem v-for="item in list" :key="item.order_id" :value="item" @cancleorder="cancle"></OrderListItem>
    </div>
  </template>

<script>
import OrderListItem from '@/components/OrderListItem.vue'
import { cancelOrder, getOrderList, todoCounts } from '@/api/order'
export default {
  name: 'OrderPage',
  components: {
    OrderListItem
  },
  data () {
    return {
      active: this.$route.query.dataType || 'all',
      counts: {},
      list: []
    }
  },
  methods: {
    async gettodoCounts () {
      const { data: { counts } } = await todoCounts()
      this.counts = counts
    },
    async getOrderList () {
      const { data: { list } } = await getOrderList(this.active)
      list.data.forEach(element => {
        element.total_num = 0
        element.goods.forEach(goods => {
          element.total_num += goods.total_num
        })
      })
      this.list = list.data
    },
    async cancle (value) {
      await cancelOrder(value)
      this.$toast('取消订单成功')
      this.getOrderList()
    }
  },
  created () {
    this.gettodoCounts()
    this.getOrderList()
  },
  watch: {
    active: {
      immediate: true,
      handler () {
        this.getOrderList()
      }
    }
  }
}
</script>

  <style lang="less" scoped>
  .order {
    background-color: #fafafa;
  }
  .van-tabs {
    position: sticky;
    top: 0;
  }
  .num {
    z-index: 999;
    position: absolute;
    top: -2px;
    right: 0;
    min-width: 16px;
    padding: 0 4px;
    color: #fff;
    text-align: center;
    background-color: #ee0a24;
    border-radius: 50%;
    position: relative;
    padding: 0 6px;
  }
  </style>
